<template>
  <div>
    <div class="content">
      <ul class="clearfix">
        <li @click="goMusiclist(usermusicLists.id)">
          <img :src="usermusicLists.coverImgUrl" alt="" />
          <div>
            <a class="iconfont icon-monitor"></a>
            <span class="remd_lnum">{{ usermusicLists.playCount | playCountA }}</span>
          </div>
          <p>{{usermusicLists.name}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getUserPlaylist } from "../../../api/userinfo";
export default {
  data() {
    return {
        usermusicLists:{}
    };
  },
  methods: {
    getUserPlaylistFun() {
          getUserPlaylist({uid:this.userId}).then(data=>{
              console.log("1111",data);
              this.usermusicLists = data.playlist[0]
          })
    
    },
    goMusiclist(id) {
      console.log(id);
      this.$router.push({
        path: "/recommend/musiclist",
        query: {
          id,
        },
      });
      console.log(this.$router);
    },
    
  },
  computed: {
    userId() {
      return this.$store.state.userId;
    },
  },
  created() {
     this.getUserPlaylistFun()
  },
filters:{
    playCountA(value){
        if (value>10000) {
             let w = value>1000?value/10000:value;//万计算
             let y = w >10000 ? parseInt(w/10000) + "亿" : parseInt(w) + "万"; //亿计算
             return y ;                    
         }else{
             return value
         }
    }
}
};
</script>

<style lang="less" scoped>
        .content li{
            width: 33.33%;
            float: left;
            position: relative;
            margin-bottom: 16px;
            img{
                display: block;
                width: 3.125rem;
                height: 3.125rem;
                margin:0 auto;
                border-radius: 3px;
            }
            p{
                font-size: .28125rem;
                color:#fff;
                height: .78125rem;
                overflow: hidden;
                line-height: .4375rem;
                padding: .15625rem .109375rem;    
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            div{
                position: absolute;
                left: 8px;
                top: 0px;
                width: 200px;
                background-color: rgba(38, 38, 38, 0.2);
                font-size: 15px;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
              .remd_lnum{
                  // background-color: #000;
                  width: 190px;
                  // position: absolute;
                  // opacity: .3;
                  // top:0px;
                  // right: 8px;
                  font-size: .3125rem;
                  color:#fff;
                  margin-left: 8px;
              }
              .iconfont {
                color: #fff;
                font-size: 25px;
              }              
            }

        }
</style>